import React from 'react'
import Head from 'next/head'
import {Row, Col, Breadcrumb,Affix,BackTop} from 'antd'
import {Header} from '../component/Header'
// Author
import Author from "../component/Author"
// Footer
import Footer from "../component/Footer"
import Advirt from "../component/Advert"
// markdown
import marked from 'marked'
import hljs from "highlight.js"
import "highlight.js/styles/monokai-sublime.css"
// url
import Url from "./api/url"
// axios
import axios from "./api/axios"
// lodash
import Tocify from "../component/tocify.tsx"
// css 
import "../styles/component/details.css"
import "markdown-navbar/dist/navbar.css"
// ICON
import {CalendarOutlined,FolderOutlined,FireOutlined} from "@ant-design/icons"
const Detailed = (detail) =>{  
  const renderer = new marked.Renderer()
  const tocify = new Tocify()
  renderer.heading = function(text, level, raw) {
        const anchor = tocify.add(text, level);
        return `<a id="${anchor}" href="#${anchor}" class="anchor-fix"><h${level}>${text}</h${level}></a>\n`;
      };

  marked.setOptions({
    renderer:renderer,
    gfm:true,
    pedantic:false,
    sanitize:false,
    tables:true,
    breaks:false,
    smartLists:true,
    highlight:(code)=>{
      return hljs.highlightAuto(code).value
    }
  })

  let html = marked(detail.article_content)
  return(
  <>
  <title>笔迹-详情</title>
   <Affix offsetTop={0}>
     <div>
    <Head>
    </Head>
    <Header />
    </div>
    </Affix>
    <Row className="comm-main" type="flex" justify="center">
      <Col className="comm-left" xs={22} sm={22} md={16} lg={18} xl={14}  >
        <div className="bread-div">
            <Breadcrumb>
              <Breadcrumb.Item>
                <a href="/">首页</a>  
              </Breadcrumb.Item>
                  <Breadcrumb.Item>文章详情</Breadcrumb.Item>        
            </Breadcrumb>
        </div>

        <div className="detailed-title">
            {detail.title}
        </div>
        <div className="list-icon center">
         
          <CalendarOutlined /><span className="info_show">{detail.create_time}</span>
       
          
          <FolderOutlined /><span className="info_show">{detail.type_name}</span>
       
          <FireOutlined /><span className="info_show">{detail.view_count}</span>
 
        </div>
        <div className="detailed-content"
          dangerouslySetInnerHTML={{__html:html}}
        >
        
        </div>
      </Col>

      <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
        <Author />
        <Affix offsetTop={75}>
        <div className="detailed-nav comm-box">
            <div className="nav-title">文章目录</div>
            <div className="toc-list">
              {tocify && tocify.render()}
            </div>
        </div>
        </Affix>
        {/* <Advirt /> */}
      </Col>
    </Row>
    <Footer />
    <BackTop />
    <script src='/static/js/three.min.js'></script>
    <script src="/static/js/datouwang.js"></script>
 </>
)
  }


  Detailed.getInitialProps= async(content)=>{
    let id = content.query.id
    let res = await axios.get(Url.detail,{params:{id:id}})
    return res.data.data[0]
  }
export default Detailed